<template>
  <view>
    <view class="honorListCard pa-10 br-10" @click="openModel">
      <view v-if="inputList.length" class="fz-14" :class="[tagFlex && 'disFlx flexWarp']">
        <view
          v-for="(v, i) in inputList"
          :key="i"
          :class="{ disabled: getDisabled }"
          class="ma-5 tag px-11 linh-20 br-5"
        >
          {{ v.input }}
        </view>
      </view>
      <view v-else class="disFlxCC fz-12">
        <!-- <view class="pt-22">让秘书处更好的服务你</view> -->
        <view v-if="getDisabled" class="py-22 disabledColor">暂无内容</view>
        <view v-else class="py-22 addBtn">
          <text>请添加</text>
          <text class="ant-iconfont fz-12 ml-5">&#xe77e;</text>
        </view>
      </view>
    </view>
    <view v-if="!getDisabled" class="fz-12 mt-8" style="color: #aaabab" >{{ getProps?.placeholder }}</view>
  </view>

  <UniPopup ref="formHonor" type="bottom" backgroundColor="#FFF">
    <view class="form-honor">
      <view class="fontTC pt-22 fz-18 fw-7">添加</view>
      <view class="py-8 fz-12" style="color: #aaabab; white-space: pre-wrap">
        {{ getPlaceholder }}
      </view>
      <view class="form-honor--add">
        <UniEasyinput
          class="form-honor--input"
          v-model="addVal"
          :disabled="isMaxLength"
          type="text"
          :inputBorder="false"
          :clearable="false"
          placeholder="输入一条后点击添加"
          :trim="true"
          :maxlength="inputMaxlength"
          @confirm="added"
        />
        <button
          :disabled="isMaxLength || !addVal"
          class="form-honor--botton"
          type="none"
          @click="added"
        >
          <text>添加</text>
        </button>
      </view>
      <view class="form-honor--list">
        <view class="fz-12 py-8">
          共可添加
          <text style="color: #b47026">{{ listMaxLength }}项</text>
          ， 已添加
          <text style="color: #b47026">{{ inputList.length }}项</text>
        </view>
        <scroll-view scroll-y class="tag-scroll">
          <view class="tag-empty" :class="[tagFlex && 'form-honor--tag__flex']">
            <template v-for="(v, i) in inputList" :key="i">
              <view class="form-honor--tag" @click="del(i)">
                <view class="tag-text text-overflow-1">{{ v.input }}</view>
                <view class="ali-icon">&#xe621;</view>
              </view>
            </template>
          </view>
        </scroll-view>
      </view>
    </view>
  </UniPopup>
</template>

<script setup lang="ts">
  import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import { Toast } from '@/utils';
  import { propTypes } from '@/utils/propTypes';
  import { computed, type PropType, ref, unref, watch, getCurrentInstance } from 'vue';
  import { useFormItem } from '../hooks/useContext';
  import { isArray } from 'lodash-es';

  const props = defineProps({
    modelValue: Array as PropType<string[]>,
    label: propTypes.string.def('荣誉'),
    placeholder: propTypes.string,
    disabled: propTypes.bool.def(false),
    /** 列表达最大数 */
    listMaxLength: propTypes.number.def(10),
    /** 单行输入最大字数 */
    inputMaxlength: propTypes.number.def(30),
    /** tag flex展示 */
    tagFlex: propTypes.bool.def(false),
  });

  const { getProps, setFormModel, FormItem } = useFormItem(props);
  const getVal = ref<string[]>([]);
  const getLabel = computed(() => unref(FormItem?.getValues)?.schema.label || props.label);
  const isMaxLength = computed(() => props.listMaxLength - inputList.value.length <= 0);
  const getPlaceholder = computed(
    () =>
      unref(FormItem?.getComponentsProps)?.placeholder ||
      (props.placeholder ? props.placeholder : `请输入${getLabel.value}`),
  );
  const getDisabled = computed(() => getProps.value.disabled || props.disabled);

  watch(
    [() => getProps.value.modelValue, () => props.modelValue],
    ([v1, v2]) => {
      let val = (v1 || v2 || []) as string | string[];
      if (!isArray(val)) val = val.split(',');
      getVal.value = val;
    },
    {
      immediate: true,
    },
  );

  const emit = defineEmits(['update:modelValue']);
  const inputList = computed(() => {
    const val = getVal.value;
    if (val?.length) {
      return val.map((v: string) => ({ input: v }));
    }
    return [];
  });

  const addVal = ref('');
  function added() {
    if (getDisabled.value || isMaxLength.value) return;
    if (addVal.value) {
      getVal.value.push(addVal.value);
      setValue();
    } else {
      Toast('请先填写内容', undefined, 1500);
    }
  }

  function del(index: number) {
    if (getDisabled.value) return;
    getVal.value.splice(index, 1);
    setValue();
  }

  const honorInput = (val: string, i: number) => {
    getVal.value[i] = val;
    setValue();
  };

  function setValue() {
    emit('update:modelValue', getVal.value);
    setFormModel(getVal.value);
    addVal.value = '';
  }

  const _this = getCurrentInstance();
  const openModel = function () {
    if (getDisabled.value) return;
    (_this?.refs['formHonor'] as any).open();
  };
</script>

<style lang="scss" scoped>
  .form-honor {
    width: 100%;
    flex: 1;
    box-sizing: border-box;
    padding: 0 30rpx;
    &--add {
      height: 72rpx;
      background-color: #f5f5f5;
      border-radius: 10rpx;
      display: flex;
      margin: 16rpx 0;
    }
    &--input {
      flex: 1;
    }
    &--botton {
      width: 138rpx;
      height: 72rpx;
      background: #2878ff;
      border-radius: 0 10rpx 10rpx 0;
      line-height: 72rpx;
      text-align: center;
      font-size: 28rpx;
      color: #fff;
    }
    &--botton[disabled] {
      background-color: #dddddd;
      color: #666664;
    }
    &--tag {
      background-color: #f5f5f5;
      border-radius: 10rpx;
      // height: 54rpx;
      padding: 12rpx 20rpx;
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      margin-right: 20rpx;
      width: max-content;
      max-width: calc(100% - 60rpx);
      .tag-icon {
        width: 30rpx;
        height: 30rpx;
        flex-shrink: 0;
      }
      .tag-text {
        flex: 1;
        font-size: 28rpx;
        color: #333;
      }
      .ali-icon {
        margin-left: 10rpx;
        font-size: 28rpx;
      }
    }
    &--tag__flex {
      display: flex;
      flex-wrap: wrap;
    }
    .tag-empty:empty::before {
      content: '暂未添加';
      color: #aaabab;
      font-size: 28rpx;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .tag-scroll {
      position: relative;
      height: 40vh;
      padding: 20rpx 0;
    }
  }
  .honorListCard {
    background-color: #f8f8f8;
    .addBtn {
      color: #2878ff;
    }
    .disabledColor {
      color: #666664;
    }
    .flexWarp {
      flex-wrap: wrap;
    }
    .tag {
      color: #6ba2ff;
      border: solid 1px #6ba2ff;
      flex-shrink: 0;
      width: fit-content;
    }
    .tag.disabled {
      color: #808080;
      border: solid 1px #aaabab;
    }
  }
</style>
